@import "../../../static/less/color.less";
.upload-panel{
  padding: 100px 0;
  .upload-des{
    h1{
      margin: 0;
      font-size: 24px;
      color: #616161;
      font-weight: normal;
      display: inline;
    }
    span{
      font-size: 16px;
      color: #999;
    }
    .space{
      margin-left: 25px;
    }
    .split{
      margin: 0 5px;
    }
    .content{
      margin-top: 20px;
      a{
        color: @red;
        font-size: 12px;
        text-decoration: none;
      }
    }
    .des{
      margin: 0;
      line-height: 18px;
      color: @font_grey_1;
      font-size: 12px;
    }
  }
  .upload-detail{
    margin-top:40px;
    padding-top:30px;
    background: @base_white;
    .video-list{
      position:relative;
      border-top:1px solid @grey_border;
      border-bottom:1px solid @grey_border;
    }
    .list-wrap{
      padding-top: 25px;
    }
    .public-tabs{
      width: 220px;
      height: 34px;
      margin: 30px auto 0 auto;
      .tab{
        width: 110px;
        float: left;
        border-right: 1px solid @white_1;
        text-align: center;
        background:@grey_darker_1;
        line-height:34px;
        cursor:pointer;
        &.selected{
          background: linear-gradient(to right, @red_linear_1, @red_linear_2);
        }
        &.selected2{
          background: @font_grey;
        }
        span{
          font-size: 14px;
          color: #fff;

        }
      }
    }
  }
}
.film-details{
  border-top:1px solid @grey_border;
  padding-top: 40px;
  padding-left: 10px;
  .film-base-info{
    overflow: hidden;
  }
  .film-labels{
    margin-top: 35px;
    margin-left: 23px;
    position: relative;
    .labels-title{
      font-size: 14px;
      color: @font_grey;
    }
    .labels-title-des{
      font-size: 12px;
      color: @font_grey_1;
    }
    .label-input{
      width: 940px;
      height: 34px;
      line-height: 34px;
      border-radius: 4px;
      border-color: @grey_border;
      margin: 10px 0;
    }
    .labels-add{
      height: 34px;
      position: absolute;
      text-align: center;
      top: 30px;
      z-index: 11;
    }
    .labels-options{
      font-size: 12px;
      color: @font_grey_1;
      line-height: 22px;

      .labels-options-wrap{
        display: inline-block;
        vertical-align: middle;
        .label{
          background: @white_2;
          border: 1px solid @grey_border;
          margin-top: 0;
          cursor: pointer;
          padding: 1px 14px;
          &:before{
            border-right-color: @white_2;
          }
          &:after{
            border-color: @grey_border;
          }
          .arrow{
            border-right-color: @grey_border;
          }
        }
      }
    }
  }
  .film-d-area{
    border: 1px solid @grey_border;
    width: 940px;
    margin-left: 23px;
    border-radius: 4px;
    background: @bg_panel;
    overflow: hidden;
    .film-d-title{
      height: 34px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px;
      span{
        font-size: 14px;
        line-height: 34px;
        color: @font_grey_1;
      }
    }
  }
  .film-add-items{
    width: 940px;
    height: 34px;
    margin-left: 23px;
    margin-top: 30px;
    text-align: center;
    .add-item{
      //float:left;
      display: inline-block;
      margin: 0 10px;
      .item-title{
        font-size: 14px;
        color: @font_grey;
        vertical-align: middle;
      }
      .select{
        display: inline-block;
        width: 200px;
        height: 34px;
        border: 1px solid @grey_border;
        border-radius: 6px;
        margin-left: 10px;
        vertical-align: middle;
      }
    }
  }
  .film-types{
    .film-types-items{
      width: 860px;
      margin: 10px auto;
      .film-item{
        width: 90px;
        height: 34px;
        display: inline-block;
        font-size: 14px;
        line-height: 34px;
        padding: 0;
        border-radius: 4px;
        text-align: center;
        color: @base_white;
        background: @grey_bg;
        margin-bottom: 10px;
        margin-left: 1px;
        &.selected{
          background: @red;
        }
      }
      .film-tips{
        font-size: 12px;
        color: @font_grey_1;
      }
    }

  }
  .film-download{
    margin-top: 30px;
    .film-download-items{
      overflow: hidden;
      width: 860px;
      margin: 0 auto;
      padding-bottom: 20px;
    }
    .film-dl-wrap{
      width: 1000px;
      height: 50px;
      border-bottom: 1px solid @grey_border;
    }
    .film-dl-item{
      position: relative;
      width: 280px;
      height: 34px;
      font-size: 14px;
      color: @base_white;
      line-height: 34px;
      text-align: center;
      background: @grey_bg;
      border-radius: 4px;
      float: left;
      margin-right: 10px;
      cursor:pointer;
      .sp{
        position: absolute;
        left: 10px;
        top:7px
      }
      &.selected{
        background: @red;
      }
      &.pass-box{
        background: @font_grey;
      }
      .pass{
        height: 34px;
        line-height: 34px;
        color: @font_grey;
        float: right;
        border: 1px solid @grey_border;
        width: 200px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        text-align: center;
      }
    }
    .film-dl-version{
      margin-top: 18px;
      text-align: center;
      .film-version{
        margin: 0 20px;
        color: @red;
        cursor: pointer;
        &.disabled{
          color: @font_grey;
        }
        &:before{
          content:"";
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 5px;
          border: 2px solid @red;
          margin-right: 10px;
        }
      }
      .film-price{
        display: inline-block;
        margin: 0 10px;
        .film-version{
          display: block;
          margin: 0;
          text-align: left;
        }
        input{
          width: 120px;
          height: 24px;
          line-height: 24px;
          border: 1px solid @grey_border;
          text-indent: 10px;
        }
        .input-wrap{
          position: relative;
        }
        .measure{
          position: absolute;
          right: 10px;
          font-size: 12px;
          top: 4px;
          color: @font_grey_1;
        }
      }
    }
    .film-dl-version-tips{
      text-align: center;
      font-size: 12px;
      color: @font_grey_1;
      margin-top: 14px;
      a{
        color: @red;
        text-decoration: none;
      }
    }

  }

  .film-edit{
     margin-top: 30px;
    background: @base_white;
  }
  .expand-type-transition{
    transition: all .3s ease;
    height: 88px;
  }
  .expand-type-enter,.expand-type-leave{
    height: 0;
    opacity: 0;
  }
  .expand-download-transition{
    transition: all .3s ease;
    //height: 146px;
  }
  .expand-download-enter,.expand-download-leave{
    height: 0;
    opacity: 0;
  }
  .expand-edit-transition{
    transition: all .3s ease;
    height: 372px;
  }
  .expand-edit-enter,.expand-edit-leave{
    height: 0;
    opacity: 0;
  }
}
.upload-area{
  width: 100%;
  margin-top: 40px;
  border-top: 1px solid @grey_border;
  padding-bottom: 75px;
  p{
    font-size: 12px;
    color: @font_grey;
    text-align: center;
    margin-top: 55px;
    a{
      color: @red;
      text-decoration: none;
    }
  }

}
.label{
  margin-top: 9px;
  border-bottom-right-radius: 7px;
  border-top-right-radius: 7px;
  line-height: 18px;
  padding: 1px 10px;
  background: @label_bg;
  border: 1px solid @label_orange;
  &:before{
    border-right-color: @label_bg;
    border-width: 10px;
    left: -20px;
    z-index: 2;
  }
  &:after{
    width: 6px;
    height: 6px;
    border-radius: 3px;
    border-color: @label_orange;
    left: 1px;
    top: 7px;
  }
  .arrow{
    display: block;
    position: absolute;
    border-color: transparent;
    border-style: solid;
    border-width: 11px;
    border-left-width: 0px;
    border-right-color: @label_orange;
    left: -12px;
    top: -1px;
    z-index: 1;
  }
  .i22{
    cursor: pointer;
    margin-left: 5px;
    margin-top: -2px
  }
}
.red-star-import:after{
  content: "*";
  color: @red;
  vertical-align: top;
}
.input-item{
  margin-left:25px;
  margin-bottom:10px;
  float:left;
  span{
    font-size:14px;
    line-height: 34px;
    color: #333;
    margin-right: 5px;
  }
  input{
    height: 34px;
    line-height: 34px;
    text-indent: 10px;
    border-color: #d6d6d6;
    width: 180px;
    border-radius: 4px;
  }
}

.video-items{
  overflow:hidden;
  padding-left: 28px;
  width: 1100px;
  .video-item{
    float: left;
    margin-right:40px;
    border:1px solid transparent;
    width: 160px;
    height: 90px;
    background: @grey_lighter_2;
    font-size: 12px;
    color: @font_grey;
    position:relative;
    img{
      width: 160px;
      height: 90px;
    }
    .des{
      position: absolute;
      top: 10px;
      left: 10px;
      display: none;
    }
    .name{
      width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 0;
    }
    .size{
      margin: 0;
    }
    .cover-up-btn{
      position: relative;
      top: 15px;
      width: 60px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px;
      background: @base_white;
      &:hover{
        color: @red;
      }
    }
    &:hover{
      border: 1px solid @red;
      .des{
        display: block;
      }
      img{
        display: none;
        //margin: 1px;
        //width: 156px;
        //height: 86px;
      }
    }
    .delete{
      position: absolute;
      right: 5px;
      top: 5px;
      cursor: pointer;
      &:hover{
        background-position: -322px -267px;
      }
    }
  }

}
.tips-none{
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  color: @font_grey_4;
  padding: 15px auto;
}
.tips-video{
  padding-left: 28px;
  font-size: 12px;
  line-height: 24px;
  color: @font_grey_4;
  margin: 10px 0;
}
.film-types{
  margin-top: 30px;
}
//上传中
.uploading-head{
  overflow: hidden;
  span{
    font-size: 12px;
    color: @font_grey_1;
  }
  .title{
    font-size: 24px;
    line-height: 30px;
    color: @font_grey;
    margin: 0;
    float: left;
  }
  .uploading-process{
    float: left;
    line-height: 34px;
    margin-left: 40px;
    .process-des{
      &:before{
        content: "|";
        display: inline-block;
        margin: 0 6px 0 4px;
        line-height: 32px;
        vertical-align: top;
      }
    }
    .data{
      color: @font_blue;
      margin: 0 3px;
    }
  }
  .uploading-option{
    float: right;
    line-height: 34px;
    .pause{
      cursor: pointer;
    }
    .cancel{
      cursor: pointer;
    }
    .sp1{
      margin-right: 5px;
      margin-left: 10px;
    }
  }
}
.uploading-content{
  margin-top: 30px;
  background: @base_white;
  padding: 40px 60px;
  .item{
    padding: 20px 0;
    border-bottom: 1px solid @grey_border_1;
    overflow: hidden;
    position: relative;
    img{
      width: 160px;
      height: 90px;
      float: left;
    }
  }
  .process{
    float: left;
    height: 90px;
    width: 730px;
    padding: 10px 25px 10px 40px;
    margin-left: 10px;
    border-radius: 6px;
    background: @white_2;
    span{
      font-size: 12px;
      color: @font_grey_1;
      margin-right: 5px;
    }
    .name{
      font-size: 14px;
      color: @font_grey;
      margin-right: 10px;
      max-width: 250px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
    }
    .rate{
      color: @font_blue;
    }
    .process-bar{
      width: 600px;
      height: 14px;
      margin-top: 10px;
      border-radius: 6.5px;
      background: @grey_lighter_1;
      .process-rate{
        height: 14px;
        background: @red;
        border-radius: 6.5px;
      }
    }
    .process-des{
      margin-top: 5px;
    }
    .process-option{
      position: absolute;
      right: 15px;
      top: 57px;
      span{
        margin-right: 15px;
        cursor: pointer;
      }
    }
  }
}
.uploading-finish{
  margin-top: 30px;
  background: #fff;
  width: 1020px;
  height: 450px;
  .upload-bg{
    width: 330px;
    height: 130px;
    margin: 0 auto;
    position: relative;
    top: 120px;
  }
  .upload-suc{
    position: relative;
    z-index: 1;
    top: 150px;
    text-align: center;
  }
  h2{
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    color: @font_grey_3;
    position: relative;
    z-index: 1;
  }
  p{
    font-size: 12px;
    color: @font_grey_1;
    margin: 5px 0;
  }
  a{
    color: @red;
    margin: 0 3px;
    text-decoration: none;
  }
}
